<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
	<ui:define name="head">
		<title>CT饱和特性分析</title>
		<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
#totalCase .box-header {
	font-size: 18px;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="full-center-content-scroll-noheader">
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs pull-left">
					<li class="active"><a href="#detailedCase" id="detailedCaseTab" data-toggle="tab">评估列表</a></li>
					<li><a href="#totalCase" data-toggle="tab">统计分析</a></li>
				</ul>
				<div class="tab-content no-padding">
				<!-- 明细 -->
					<div class="chart tab-pane active" id="detailedCase" style="position: relative">
						<div class="box box-success">
							<div class="box-header">
								<h:form id="selectForm">
									<div class="box box-solid with-border">
										<div class="box-header">
											<p:outputLabel value="故障时间:" for="faultTimest" />
											<p:calendar id="faultTimest" pattern="yyyy-MM-dd" navigator="true" maxdate="Date()"
												value="#{cTSaturationController.faultTimest}" />
											<p:outputLabel for="faultTimeet" value="至" style="margin-right:5px;margin-left:5px;" />
											<p:calendar id="faultTimeet" pattern="yyyy-MM-dd" navigator="true" maxdate="Date()"
												value="#{cTSaturationController.faultTimeet}" />
											 <p:outputLabel value="厂站：" for="station" style="margin-left:10px" />
										     <p:autoComplete id="station" value="#{cTSaturationController.stationName}"
											completeMethod="#{cimUtilController.completeCimStation500}">
											<p:ajax update=":selectForm:lineName" event="itemSelect"
												listener="#{cTSaturationController.autoFilterAcline}" />
									     	</p:autoComplete>
									     	<p:outputLabel value="线路名称:" for="lineName" style="margin-left:5px" />
									    	<p:autoComplete id="lineName" dropdown="true" value="#{cTSaturationController.lineName}"
											scrollHeight="400" completeMethod="#{cTSaturationController.completeAcLine}" />
											<p:outputLabel value="只显示饱和记录：" for="saturate" style="margin-left:10px" />
											<p:selectBooleanButton id="saturate" value="#{cTSaturationController.saturate}"
												onLabel="是" offLabel="否" style="width:60px" />
											<p:commandButton id="selectBtn" value="查询" update=":form:saturatedTb"
												icon="ui-icon-search" style="margin-left:10px"
												actionListener="#{cTSaturationController.selectByCondition}" />
											<div class="box-tools pull-right">
												<button type="button" id="selectButton" title="高级查询" class="btn btn-default"
													onclick="onSelectDivClick();" style="margin-right: 50px;">
													<span id="selectButtonIcon" class="fa fa-caret-down">高级查询</span>
												</button>
											</div>
										</div>
									</div>
									<div class="panel-collapse collapse" id="selectDiv" style="padding-left:3px">
										<h:panelGrid columns="4" style="margin-top:8px;margin-left:5px" cellpadding="6">
											<p:outputLabel value="谐波比：" style="margin-left:5px;"/>
											<p:inputText value="#{cTSaturationController.seventhPowerHarmonicProportion}" />
											<p:outputLabel value="面积比：" style="margin-left:15px;"/>
											<p:inputText value="#{cTSaturationController.areaProportion}" />
										</h:panelGrid>
									</div>
								</h:form>
							</div>
							<div class="box-body">
								<h:form id="form">
									<p:dataTable id="saturatedTb" var="ct" rowIndexVar="ite"
										value="#{cTSaturationController.ctModel}" emptyMessage="无记录" style="margin-bottom:20px"
										rows="15" paginator="true"
										paginatorTemplate="{Customization} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
										rowsPerPageTemplate="15,20,50" paginatorPosition="bottom">
										<f:facet name="{Customization}">
											<p:outputLabel value="总计：#{cTSaturationController.ctModel.size()} 条记录"
												style="margin-right:20px;" />
										</f:facet>
										<p:column width="60" headerText="序号" style="text-align:center">
											<h:outputText value="#{ite+1}" />
										</p:column>
										<p:column headerText="站名">
											<h:outputText value="#{ct.stationName}" />
										</p:column>
										<p:column headerText="线路名称">
											<h:outputText value="#{ct.lineName}" />
										</p:column>
										<p:column headerText="故障时间">
											<h:outputText value="#{ct.faultTime}" />
										</p:column>
										<p:column headerText="相别">
											<h:outputText value="#{ct.phase}" />
										</p:column>
										<!-- <p:column headerText="故障点电流">
								<h:outputText value="#{ct.faultPointCurrent}" />
							</p:column> -->
										<p:column headerText="最大电流">
											<h:outputText value="#{ct.maxCurrent}" />
										</p:column>
										<p:column headerText="谐波比">
											<h:outputText value="#{ct.seventhPowerHarmonicProportion}" />
										</p:column>
										<p:column headerText="面积比">
											<h:outputText value="#{ct.areaProportion}" />
										</p:column>
										<p:column headerText="是否饱和">
											<h:outputText value="#{ct.satiate == true ?'是':'否'}" />
										</p:column>
										<p:column headerText="查看波形" style="width:120px;text-align: center">
											<p:commandLink styleClass="fa fa-sliders" title="查看波形"
												onclick="openCTWave('#{ct.faultFileId}','#{ct.stationId}','#{ct.lineId}','#{ct.lineName}');" />
										</p:column>
									</p:dataTable>
								</h:form>
							</div>
						</div>
					</div>
					<!--  具体图形展示 -->
					<div class="chart tab-pane " id="totalCase" style="position: relative">
						<div class="box box-success">
							<div class="box-header wrap-condition">
								<label for="year">年份：</label> <input type="text" id="year" onchange="getCTData()" />
							</div>
							<div class="box-body">
								<div class="col-sm-6">
									<div class="box box-info">
										<div class="box-header with-border">
											<i class="fa fa-home"></i>全网发生CT饱和厂站数目
										</div>
										<div class="box-body">
											<div id="stationPie" style="height: 500px;"></div>
										</div>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="box box-info">
										<div class="box-header with-border">
											<i class="fa fa-gg"></i>全网发生CT饱和设备数目
										</div>
										<div class="box-body">
											<div id="devicePie" style="height: 500px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					
				</div>
			</div>

		</div>
		<div id="modal" />
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/mymodal.js"></script>
		<script src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js"></script>
		<script src="ctsa.js"></script>
		<script>
			function openCTWave(faultFileId, stationId, lineId, stationName) {

				var url = "/ui/waveh5/index.html?fileId=" + faultFileId
						+ "&amp;stationId=" + stationId + "&amp;lineId="
						+ lineId + "&amp;stationName="
						+ encodeURIComponent(stationName);

				MyModal.showModal(url);
			}
		</script>
		<script>
			function onSelectDivClick() {
				var div = $('#selectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#selectButtonIcon').removeClass("fa fa-caret-up");
					$('#selectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#selectButtonIcon').removeClass("fa fa-caret-down");
					$('#selectButtonIcon').addClass("fa fa-caret-up");
				}
			}
		</script>
	</ui:define>
</ui:composition>
